<template>
  <div>
    <el-dialog
      title="新增员工"
      :visible="dialogVisible"
      width="40%"
      @close="closeDialog"
      @open="openDialog"
    >
      <!-- 表单 -->
      <el-form
        ref="addRef"
        :model="addForm"
        :rules="addRules"
        label-width="100px"
      >
        <el-form-item label="姓名" prop="username">
          <el-input
            v-model="addForm.username"
            style="width: 80%"
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input
            v-model="addForm.mobile"
            style="width: 80%"
            placeholder="请输入手机号"
          />
        </el-form-item>
        <el-form-item label="入职时间" prop="timeOfEntry">
          <el-date-picker
            v-model="addForm.timeOfEntry"
            style="width: 80%"
            placeholder="请选择入职时间"
          />
        </el-form-item>
        <el-form-item label="聘用形式" prop="formOfEmployment">
          <el-select
            v-model="addForm.formOfEmployment"
            style="width: 80%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in hireList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工号" prop="workNumber">
          <el-input
            v-model="addForm.workNumber"
            style="width: 80%"
            placeholder="请输入工号"
          />
        </el-form-item>
        <el-form-item label="部门" prop="departmentName">
          <!--:props="{checkStrictly:true}"表示取消父子关联 可以选择任意节点
              checkStrictly:false表示父子关联,只能选中叶子节点
              checkStrictly：属性设置为true可以实现选择任一层级得数据
              属性设置为false 只能选中 最后一个
              :show-all-levels="false"输入框中是否显示选中值得完整路径
              -->
          <el-cascader
            v-model="addForm.departmentName"
            :options="options"
            :props="departProps"
            :show-all-levels="false"
          />
        </el-form-item>
        <el-form-item label="转正时间" prop="correctionTime">
          <el-date-picker
            v-model="addForm.correctionTime"
            style="width: 80%"
            placeholder="请选择转正时间"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button
          type="primary"
          @click="submit"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addEmployee } from '@/api/employee'
import { getDepartment } from '@/api/department'
import transTree from '@/utils/transTree'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addForm: {
        username: '', // 用户名
        mobile: '', // 手机号
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '', // 部门
        timeOfEntry: '', // 入职时间
        correctionTime: '' // 转正时间
      },
      addRules: {
        username: [
          {
            required: true,
            message: '用户姓名不能为空',
            trigger: ['blur', 'change']
          },
          {
            min: 1,
            max: 4,
            message: '用户姓名为1-4位',
            trigger: ['blur', 'change']
          }
        ],
        mobile: [
          {
            required: true,
            message: '手机号不能为空',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: ['blur', 'change']
          }
        ],
        formOfEmployment: [
          {
            required: true,
            message: '聘用形式不能为空',
            trigger: ['blur', 'change']
          }
        ],
        workNumber: [
          {
            required: true,
            message: '工号不能为空',
            trigger: ['blur', 'change']
          }
        ],
        departmentName: [
          {
            required: true,
            message: '部门不能为空',
            trigger: ['blur', 'change']
          }
        ],
        timeOfEntry: [
          {
            required: true,
            message: '请选择入职时间',
            trigger: ['blur', 'change']
          }
        ]
      },
      // 聘用形式下拉框
      hireList: [
        {
          label: '正式',
          value: 1
        },
        {
          label: '非正式',
          value: 2
        }
      ],
      options: [],
      departProps: {
        checkStrictly: true,
        label: 'name',
        value: 'name'
      }
    }
  },
  methods: {
    // 关闭弹出把表单校验清空和校验规则
    closeDialog() {
      this.$refs.addRef.resetFields()
      this.addForm.departmentName = ''// 手动清空部门得值
      this.$emit('close')
    },
    // 1.获取级联选择器得数据--就是树形结构
    // 获取树形数据--联级形式得数据还是又孩子必须要把字段对应页码才能显示数据
    async getDepartment() {
      const res = await getDepartment()
      this.options = transTree(res.data.depts)
    },
    // 1.2.在弹出层打开那哪一个调用联级数据
    openDialog() {
      this.getDepartment()
    },
    // 2.新增员工得确认
    // 注意：因为部门属于得到得是一一个数组最后一项才算后端需要得数据需要去除最后一项
    submit() {
      this.$refs.addRef.validate(async(isOk) => {
        if (!isOk) return
        await addEmployee({ ...this.addForm, departmentName: this.addForm.departmentName[this.addForm.departmentName.length - 1] })
      })
      this.$message.success('新增员工成功！')
      this.$emit('refresh')
    }
  }
}
</script>

<style></style>
